<template>
  <div class="business-info">
    <x-header>装箱单</x-header>
    <box gap="10px">
      <table>
        <!-- 做箱时间 -->
        <tr>
          <td class="td-title1"></td>
          <td class="td-title2">做箱时间</td>
          <td class="td-date">{{busList.startTime}}</td>
          <td>EIR:{{busList.eirCode}}</td>
        </tr>
        <tr>
          <td class="td-title1" rowspan="5">位置信息</td>
          <td class="td-title2">门点</td>
          <td colspan="2">{{busList.doorName}}</td>
        </tr>
        <tr>
          <td class="td-title2">联系电话</td>
          <td colspan="2">{{busList.contactPhone}}</td>
        </tr>
        <tr>
          <td class="td-title2">工厂地址</td>
          <td colspan="2">{{busList.address}}</td>
        </tr>
        <tr>
          <td class="td-title2">提箱点</td>
          <td colspan="2">{{busList.yard}}</td>
        </tr>
        <tr>
          <td class="td-title2">还箱点</td>
          <td colspan="2">{{busList.port}}</td>
        </tr>
        <!-- 港航信息 -->
        <tr>
          <td class="td-title1" rowspan="5">港航信息</td>
          <td class="td-title2">运营人</td>
          <td colspan="2">{{busList.theOperator}}</td>
        </tr>
        <tr>
          <td class="td-title2">航名/航次</td>
          <td colspan="2">{{busList.boat}} / {{busList.voyage}}</td>
        </tr>
        <tr>
          <td class="td-title2">装货港</td>
          <td colspan="2">{{busList.startPort}}</td>
        </tr>
        <tr>
          <td class="td-title2">卸港</td>
          <td colspan="2">{{busList.discharge}}</td>
        </tr>
        <tr>
          <td class="td-title2">交货地</td>
          <td colspan="2">{{busList.placeName}}</td>
        </tr>
        <!-- 箱信息 -->
        <tr>
          <td class="td-title1" rowspan="6">箱信息</td>
          <td class="td-title2">箱型尺寸</td>
          <td colspan="2">{{busList.type}}</td>
        </tr>
        <tr>
          <td class="td-title2">箱号</td>
          <td style="position: relative;" colspan="2" rowspan="2">
            <div class="pic-wrap">
              <div class="col-1">
                <span>{{busList.carton}}</span>
                <span>{{busList.tweight}}</span>
              </div>
              <div class="col-2">
                <img ref="photo1" src="../../assets/photo.png" :preview="pictureSrc1" :preview-text="'箱号'">
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="td-title2">箱皮重量</td>
        </tr>
        <tr>
          <td class="td-title2">封号</td>
          <td style="position: relative;" colspan="2" rowspan="2">
            <div class="pic-wrap">
              <div class="col-1">
                <span>{{busList.titles}}</span>
                <span>{{busList.fxstatus}}</span>
              </div>
              <div class="col-2">
                <img ref="photo2" src="../../assets/photo.png" :preview="pictureSrc2" :preview-text="'封号'">
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="td-title2">箱状态</td>
        </tr>
        <tr>
          <td class="td-title2">操作</td>
          <td colspan="2">
            <x-button :disabled="busList.status==='完成'" @click.native="takePhoto(1)" mini type="primary">拍箱门</x-button>
            <x-button :disabled="busList.status==='完成'" @click.native="openAlbum(1)" mini type="primary">选箱门</x-button>
            <x-button :disabled="busList.status==='完成'" @click.native="takePhoto(2)" mini type="primary">拍封号</x-button>
            <x-button :disabled="busList.status==='完成'" @click.native="openAlbum(2)" mini type="primary">选封号</x-button>
            <x-button :disabled="busList.status==='完成'" @click.native="uploadPhoto" mini type="primary">上传</x-button>
          </td>
        </tr>
        <!-- 货信息 -->
        <tr>
          <td class="td-title1" rowspan="6">货信息</td>
          <td class="td-title2">提单号</td>
          <td colspan="2">{{busList.blno}}</td>
        </tr>
        <tr>
          <td class="td-title2">件数</td>
          <td colspan="2">
            <input type="text" v-model="busList.num">
          </td>
        </tr>
        <tr>
          <td class="td-title2">毛重</td>
          <td colspan="2">
            <input type="text" v-model="busList.gweight">
          </td>
        </tr>
        <tr>
          <td class="td-title2">体积</td>
          <td colspan="2">
            <input type="text" v-model="busList.size">
          </td>
        </tr>
        <tr>
          <td class="td-title2">操作</td>
          <td colspan="2">
            <x-button :disabled="busList.status==='完成'" @click.native="signature" mini type="primary">工厂签名</x-button>
            <x-button :disabled="busList.status==='完成'" @click.native="submit" mini type="primary">确认保存</x-button>
          </td>
        </tr>
        <tr>
          <td class="td-title2">业务编号</td>
          <td colspan="2">{{busList.number}}</td>
        </tr>
        <!-- 总计 -->
        <!--<tr>-->
          <!--<td class="td-title1">总计</td>-->
          <!--<td colspan="3">-->
            <!--<div class="total">-->
              <!--<div class="col">-->
                <!--<span>总件数</span>-->
                <!--<span>{{busList.num}}</span>-->
              <!--</div>-->
              <!--<div class="col">-->
                <!--<span>总货量</span>-->
                <!--<span>{{busList.num*busList.gweight}}</span>-->
              <!--</div>-->
              <!--<div class="col last">-->
                <!--<span>总尺码</span>-->
                <!--<span>{{busList.size}}</span>-->
              <!--</div>-->
            <!--</div>-->
          <!--</td>-->
        <!--</tr>-->
        <!-- 司车信息 -->
        <tr>
          <td class="td-title1" rowspan="3">司车信息</td>
          <td class="td-title2">车牌号</td>
          <td colspan="2">{{busList.plateNumber}}</td>
        </tr>
        <tr>
          <td class="td-title2">姓名</td>
          <td colspan="2">{{busList.driverName}}</td>
        </tr>
        <tr>
          <td class="td-title2">手机号</td>
          <td colspan="2">{{busList.mobile}}</td>
        </tr>
        <!-- 备注 -->
        <tr>
          <td class="td-title1">备注</td>
          <td colspan="3">{{busList.mome}}</td>
        </tr>
        <!-- 签名 -->
        <tr class="signature-height">
          <td class="td-title1" rowspan="2">签名</td>
          <td colspan="3" ref="signatureImage">
            <img style="height: 130px;" :src="this.busList.driverSignature" alt="未签名">
          </td>
        </tr>
      </table>
    </box>

    <div v-transfer-dom>
      <confirm v-model="showSubmitTip"
      title="操作提示"
      @on-cancel="onSubmitTipCancel"
      @on-confirm="onSubmitTipConfirm">
        <p style="text-align:center;">请确认无误后再提交</p>
      </confirm>
    </div>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  Cell,
  XButton,
  Actionsheet,
  Box,
  XInput,
  TransferDomDirective as TransferDom,
  Confirm,
  XDialog,
  Previewer,
  PopupHeader,
  Popup
} from 'vux'
import {
  editDriverUpdate
} from '../../api/api'
import {
  uploadBase64Img
} from '../../api/api.com'
import {
  uploadEirPhoto,
  openCamera
} from '../../util/app'
import photoUtils from '../../util/photoUtils'
import moment from 'moment'
export default {
  name: 'business',
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Group,
    Cell,
    XButton,
    Actionsheet,
    Box,
    XInput,
    Confirm,
    XDialog,
    Previewer,
    PopupHeader,
    Popup
  },
  data () {
    return {
      showSubmitTip: false,
      busList: {},
      phoneList: [],
      signatureFlag: false,
      pictureSrc1: '',
      pictureSrc2: '',
      oldPictureSrc1: '',
      oldPictureSrc2: ''
    }
  },
  mounted () {
    this.busList = this.$store.state.orderDetail
    // 订单签名
    if (this.$store.state.app.signature.type === 'order' && this.$store.state.app.signature.data !== '') {
      this.signatureSubmit()
    }
    if (this.busList.cartonphoto !== '') {
      this.pictureSrc1 = this.busList.cartonphoto
      this.oldPictureSrc1 = this.busList.cartonphoto
      this.$refs.photo1.src = this.busList.cartonphoto
    }
    if (this.busList.titlesphoto !== '') {
      this.pictureSrc2 = this.busList.titlesphoto
      this.oldPictureSrc2 = this.busList.titlesphoto
      this.$refs.photo2.src = this.busList.titlesphoto
    }
    if (this.busList.driverSignature !== '') {
      this.signatureFlag = true
      const convas = document.getElementById('signatureCanvas')
      const image = document.createElement('img')
      image.src = this.busList.driverSignature
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = () => {
        convas.getContext('2d').drawImage(image, 0, 0)
      }
    }
  },
  methods: {
    openAlbum (index) {
      photoUtils.openAlbum().then(res => {
        const src = 'data:image/jpeg;base64,' + res
        if (index === 1) {
          this.$refs.photo1.src = src
          this.pictureSrc1 = src
        } else if (index === 2) {
          this.$refs.photo2.src = src
          this.pictureSrc2 = src
        }
      }, error => {
        alert('照片获取失败')
      })
    },
    signature () {
      this.$store.state.app.signature.type = 'order'
      this.$router.push({
        path: '/main/signature'
      })
    },
    signatureSubmit () {
      if (this.signatureFlag) {
        this.$vux.toast.text('工厂已签名')
        return
      }
      this.$store.dispatch('app/showLoading', {
        text: '正在上传'
      })
      let imageData = this.$store.state.app.signature.data.split('base64,')[1]
      uploadBase64Img({
        img: imageData,
        imgName: '签名.jpeg',
        boxId: this.busList.boxId
      }).then(res => {
        this.$store.dispatch('app/hideLoading')
        if (res.status === 200) {
          const data = res.data[0]
          this.$store.state.app.signature = {
            data: '',
            type: ''
          }
          this.busList.driverSignature = data.path
          this.$vux.toast.text('上传成功')
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    onSubmitTipCancel() {
      this.showSubmitTip = false
    },
    onSubmitTipConfirm() {
      const params = {
        blno: this.busList.blno,
        num: this.busList.num,
        gweight: this.busList.gweight,
        size: this.busList.size,
        boxId: this.busList.boxId,
        driverSignature: this.busList.driverSignature
      }
      editDriverUpdate(params).then(res => {
        if (res.status === 200) {
          this.signatureFlag = true
          this.$vux.toast.text('保存成功')
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    submit () {
      if (this.busList.driverSignature === '') {
        this.$vux.toast.text('请先签名')
        return
      }
      if (this.signatureFlag) {
        this.$vux.toast.text('工厂人员已签名保存')
        return0
      }
      this.showSubmitTip = true
    },
    takePhoto (index) {
      photoUtils.takePhoto().then(imageData => {
        const src = 'data:image/jpeg;base64,' + imageData
        if (index === 1) {
          this.$refs.photo1.src = src
          this.pictureSrc1 = src
        } else if (index === 2) {
          this.$refs.photo2.src = src
          this.pictureSrc2 = src
        }
      }, error => {
        alert('拍照失败')
      })
    },
    uploadPhoto () {
      if (this.pictureSrc1 === '' || this.pictureSrc2 === '') {
        this.$vux.toast.text('请同时上传箱门和封号照片')
        return
      }
      if ((this.pictureSrc1 !== '' && this.oldPictureSrc1 !== this.pictureSrc1) && (this.pictureSrc2 !== '' && this.oldPictureSrc2 !== this.pictureSrc2)) {
        // 两张图片都没有，同时上传
        this.$store.dispatch('app/showLoading', {
          text: '正在上传'
        })
        uploadEirPhoto({
          imageData: this.pictureSrc1,
          boxId: this.busList.boxId,
          type: String('0'),
          callback: () => {
            this.$store.state.orderDetail.cartonphoto = this.pictureSrc1
            uploadEirPhoto({
              imageData: this.pictureSrc2,
              boxId: this.busList.boxId,
              type: String('1'),
              callback: () => {
                this.$store.state.orderDetail.titlesphoto = this.pictureSrc2
                this.$store.dispatch('app/hideLoading')
                this.$vux.toast.text('上传成功')
              }
            })
          }
        })
      } else {
        if (this.pictureSrc1 !== '' && this.oldPictureSrc1 !== this.pictureSrc1) {
          // 已上传箱门，修改箱门
          this.$store.dispatch('app/showLoading', {
            text: '正在上传'
          })
          uploadEirPhoto({
            imageData: this.pictureSrc1,
            boxId: this.busList.boxId,
            type: String('0'),
            callback: () => {
              this.$store.state.orderDetail.cartonphoto = this.pictureSrc1
              this.$store.dispatch('app/hideLoading')
              this.$vux.toast.text('上传成功')
            }
          })
        } else if (this.pictureSrc2 !== '' && this.oldPictureSrc2 !== this.pictureSrc2) {
          // 已上传封号，修改封号
          this.$store.dispatch('app/showLoading', {
            text: '正在上传'
          })
          uploadEirPhoto({
            imageData: this.pictureSrc2,
            boxId: this.busList.boxId,
            type: String('1'),
            callback: () => {
              this.$store.state.orderDetail.titlesphoto = this.pictureSrc2
              this.$store.dispatch('app/hideLoading')
              this.$vux.toast.text('上传成功')
            }
          })
        }
      }
    },
    clearCanvas () {

    }
  }
}
</script>

<style lang="less">
  .weui-btn + .weui-btn{
    margin: 2px 0 !important;
  }
  .weui-btn_mini{
    line-height: 1.8 !important;
  }
  .signature-canvas{
    height: 220px;
    width: 100%;
  }
  .business-info{
    box-sizing: border-box;
    position: relative;
    table, th, td{
      border: 1px solid #000;
      border-collapse: collapse;
    }
    table{
      width: 100%;
      table-layout: fixed;
      text-align: center;
      font-size: 13px;
      // word-wrap: break-word;
      // word-break: break-all;
    }
    input {
      width: 90%;
    }
    .td-title1{
      width: 24px;
    }
    .td-title2{
      width: 70px;
    }
    .td-date{
      width: 80px;
    }
    .total{
      display: flex;
      .col{
        flex: 1;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #000;
        &.last{
          border-right: 0;
        }
      }
    }
    .pic-wrap{
      display: flex;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .col-1{
        border-right: 1px solid #000;
        width: 100px;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex: 1;
        span{
          border-bottom: 1px solid #000;
        }
      }
      .col-2{
        width: 80px;
        line-height: 38px;
        max-height: 40px;
        overflow: hidden;
        img{
          vertical-align: middle;
          max-width: 80px;
          max-height: 40px;
        }
      }
    }
    .signature-height{
      height: 100px;
    }
    .upload-img{
      max-width: 80px;
      max-height: 80px;
      border-radius: 4px;
      margin-right: 10px;
      overflow: hidden;
    }
    .upload-picture-wrap{
      border: 1px dashed #D9D9D9;
      width: 80px;
      height: 80px;
      line-height: 95px;
      text-align: center;
      border-radius: 4px;
      vertical-align: middle;
      padding: 5px;
      box-sizing: border-box;
      &.success{
        border-color: #09BB07;
      }
    }
  }
</style>
